<template>
  <div class="device-manage">
    <van-cell-group>
      <van-cell title="商铺信息">
      </van-cell>
      <van-cell icon="shop" title="商户名称" :value="shopInfo.name" />
      <van-cell icon="username" title="负责人" :value="shopInfo.managerName" />
      <van-cell icon="mobile" title="手机" :value="shopInfo.managerMobile" />
      <van-cell icon="address" title="地址" :value="shopInfo.addr" />
      <van-cell icon="liability" title="附件">
        <template slot="right-icon">
          <van-icon v-if="shopInfo.dutyLetter" name="password-view" color="green" size="1.4em" class="van-cell__right-icon" @click="viewPic" />
          <!-- <van-icon v-else name="camera" color="red" size="1.4em" class="van-cell__right-icon" @click="takePic" /> -->
        </template>
      </van-cell>
      <van-cell icon="smoke-sensor2" title="烟感设备" is-link :to="{ path: 'device-manage',name:'device-manage', query: {id:shopInfo.shopId}}" />
      <van-cell icon="alarm-contact" title="报警联系人" is-link :to="{ path: 'emergencyContact',name:'emergencyContact', query: {id:shopInfo.shopId,alarmNotifier:shopInfo.alarmNotifier}}" />
    </van-cell-group>

  </div>
</template>

<script>
import { mediaURL } from "@/config";
import wx from "weixin-js-sdk";
import { getShopById, uploadDutyLetter } from "./../../api/shop";
export default {
  data() {
    return {
      shopId:0,
      shopInfo: {
        shopId: 0,
        addr: "光谷金融港",
        dutyLetter: null,
        managerMobile: "18627771160",
        managerName: "刘恒",
        name: "飞发走丝",
        alarmNotifier: ""
      },
      items: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.shopId = this.$route.query.id;
    this.getShopIndo();
  },
  activated() {},
  deactivated() {},
  methods: {
    async getShopIndo() {
      let res = await getShopById({ id: this.shopId });
      if (res.code === 0) {
        this.shopInfo = res.data;
      } else {
        this.$toast.fail(res.msg);
      }
    },
    takePic() {
      const vm = this;
      wx.chooseImage({
        count: 1, //张数， 默认9
        sizeType: ["compressed"], //建议压缩图
        sourceType: ["album", "camera"], // 来源是相册、相机
        success: function(res) {
          // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          var localId = res.localIds[0];
          wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function(res) {
              var serverId = res.serverId; // 返回图片的服务器端ID
              vm.uploadPic(serverId);
            }
          });
        }
      });
    },
    viewPic() {
      const devicePicPath = mediaURL + this.shopInfo.dutyLetter;
      wx.previewImage({
        current: "", // 当前显示图片的http链接
        urls: [devicePicPath] // 需要预览的图片http链接列表
      });
    },
    async uploadPic(serverId) {
      let res = await uploadDutyLetter({ media_id: serverId, id: this.shopInfo.id });
      if (res.code === 0) {
        this.shopInfo.dutyLetter = res.data;
        this.$toast.success("上传成功！");
      } else {
        this.$toast.fail("上传失败！");
      }
    }
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
.sub-wrapper {
  display: flex;
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  .sub-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vw;
    border: 1px solid #eee;
  }
}
</style>
